import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import BatchUpload from '../../components/BatchUpload/Index';
import FileUpload from '../../components/BatchUpload/Upload';
import Finish from '../../components/BatchUpload/Finish';

@connect(({ publicdata, loading, accuadjust }) => ({
  uploading: loading.effects['accuadjust/uploadFileWithProgress'],
  accuadjust,
  fileId: publicdata.downloadFile.fileId,
  fileName: publicdata.downloadFile.fileName,
  currentStep: accuadjust.currentStep,
  progressPercent: accuadjust.progressPercent,
  resultInfo: accuadjust.resultInfo,
  showProgress: accuadjust.showProgress,
}))
@Form.create()
class BatchModify extends React.PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'accuadjust/fetchDownInfor',
      payload: {},
    });
    this.clearModel();
  }

  componentWillUnmount() {
    this.clearModel();
  }

  clearModel = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'accuadjust/updateModelData',
      payload: {
        currentStep: 0,
        progressPercent: 0,
        showProgress: false,
      },
    });
  };

  // 设置当前位置
  setCurrentstep = currentStep => {
    const { dispatch } = this.props;
    dispatch({
      type: 'accuadjust/updateModelData',
      payload: { currentStep },
    });
    if (!currentStep) {
      this.clearModel();
    }
  };

  // 上传文件：需要携带参数即传：batchQuery
  uploadFile = formData => {
    const { dispatch, resultInfo } = this.props;
    dispatch({
      type: 'accuadjust/uploadFileWithProgress',
      payload: { formData, type: 'modify' },
    }).then(res => {
      if (res.success) {
        dispatch({
          type: 'accuadjust/updateModelData',
          payload: {
            showProgress: true,
            resultInfo: {
              ...resultInfo,
              errorUrl: '/osApi/accuEntryAdj/expUpdAccuEntAdjErr', // 下载错误信息地址
              errorParams: null, // 下载错误数据参数
            },
            // resultInfo: {
            //   // 结果数据必传
            //   batchName: '批量修改', // 任务名称
            //   taskCount: 0, // 导入数据
            //   successCount: 0, // 成功数据
            //   errorCount: 0, // 失败数据
            //   batchNo: '', // 批次号
            //   errorUrl: '/osApi/accuEntryAdj/expUpdAccuEntAdjErr', // 下载错误信息地址
            //   errorParams: null, // 下载错误数据参数
            // },
          },
        });
      }
    });
  };

  render() {
    const {
      uploading,
      accuadjust: { fileId, fileName },
      currentStep,
      showProgress,
      progressPercent,
      resultInfo,
    } = this.props;
    return (
      <PageHeaderWrapper>
        <BatchUpload currentStep={currentStep}>
          <FileUpload
            title="上传文件"
            currentStep={currentStep}
            setCurrentstep={this.setCurrentstep}
            downloadTempInfo={{
              // 下载模板信息
              params: { fileId, fileName },
              url: '/csApi/batchTask/downloadFile',
              type: 'GET',
            }}
            uploadFile={this.uploadFile}
            uploading={uploading}
            // 展示进度条需要的数据
            progressVisible={showProgress}
            progressPercent={progressPercent || 0}
            progressTitle="批量修改"
          />
          <Finish title="完成" resultInfo={resultInfo} setCurrentstep={this.setCurrentstep} />
        </BatchUpload>
      </PageHeaderWrapper>
    );
  }
}

export default BatchModify;
